<template>
    <div class="container">
        <h3>外包管理</h3>
      <el-tabs v-model="activeName1" type="border-card" style="margin-top:20px;" @tab-click="handleClick1">
        <el-tab-pane v-if='switchHeadTab=="生产系统"' label="国标" name="1" ></el-tab-pane>
        <el-tab-pane v-if='switchHeadTab=="生产系统"' label="省标" name="2" ></el-tab-pane>
        <el-tab-pane v-if='switchHeadTab=="生产系统"' label="C10中药饮片" name="中药饮片" ></el-tab-pane>

        <el-row style="margin:15px 0 20px 0">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" style="width:300px" v-model.trim="searchName">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-button slot="append" @click="handleSearch">搜索</el-button>
                </el-input>
            </el-col>
          <el-button style="float:right; margin-right: 10px" @click="download1">导出数据</el-button>
        </el-row><el-row>
            <el-table
                :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column v-if='switchHeadTab=="生产系统"' prop="inventoryType" sortable label="产品大类"></el-table-column>
                <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                <el-table-column prop="batch" sortable label="包装批次"></el-table-column>
                <el-table-column prop="time" sortable label="生产日期"></el-table-column>
              <el-table-column prop="address" sortable label="产地"></el-table-column>
              <el-table-column prop="createTime" sortable label="寄库日期"></el-table-column>
                <el-table-column prop="loadingQuantity" sortable label="每包计量">
                    <template slot-scope="scope">
                        {{scope.row.pelletWeight}}
                    </template>
                </el-table-column>
<!--                <el-table-column prop="scUseNum" sortable label="投料量">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{scope.row.scUseNum}}{{scope.row.scUseNumUnits}}-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column prop="totalNumber" sortable label="实际产量">
                    <template slot-scope="scope">
                        <span v-if="scope.row.totalNumber == ''"></span>
                        <span v-else>
                            {{scope.row.totalNumber}}{{scope.row.units}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center" v-if='switchHeadTab=="生产系统"'>
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                               v-if="dels"
                                @click="handleFrmLoss(scope.$index, scope.row)"
                                style="color:#409EFF"
                            >实际产量</el-button>

                        </template>
                    </el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>
        </el-row>
      </el-tabs>
        <el-dialog title="实际产量" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="包装批号：" label-width="120px">
                             <el-input v-model.trim="pici" style="width:300px" :disabled="ifshow"></el-input>
                        </el-form-item>
                       <el-form-item label="外包完成日期：" label-width="120px" prpo="time">
                            <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ruleForm.time" style="width: 300px;"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="实际产量：" prop="newNumber" label-width="120px">
                            <el-input v-model.trim="ruleForm.newNumber" style="width:300px">

                                <!-- <template slot="append">

                                    <el-select style="width:80px;" v-model="ruleForm.units" :disabled="disabled" placeholder="单位">
                                        <el-option v-for="item in unitslist" :key="item.id" :label="item.name" :value="item.name">{{item.name}}</el-option>
                                    </el-select>
                                </template> -->
                            </el-input>
                            <span style="margin-left:10px;">袋</span>
                        </el-form-item>
                        <el-form-item label="操作人：" prop="relevantUser" label-width="120px">

                             <el-input v-model.trim="ruleForm.relevantUser"  :disabled="disablede" style="width:300px"></el-input>

                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {pack_findByList,user_findAll,manufacture_findById,pack_adjust,pack_findById,unit_findByList} from "@/request/api";
import axios from "axios";
import { mapState } from 'vuex';
    export default {
        data() {
            return {
              activeName1:'1',
                pici:'',
                ifshow:true,
                disablede:true,
                dialogFormVisible: false,
                searchName: '',
                tableData: [
                    {
                        id: '11',
                        breedName: '1211',
                        batch: '',

                    }
                ],
                disabled:false,
                total1: 0,
                unitslist:'',
                currentPage1:1,
                pagesize1:10,
                ruleForm: {
                    time: '',
                    relevantUser: '',
                    relevantUserId: '',
                    newNumber: '',
                    units: '袋',
                },
                rules:{
                    // time: [
                    //     { required: true, message: '不能为空', trigger: 'change' }
                    // ],
                    relevantUser: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    newNumber: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                  time:[
                    { required: true, message: '不能为空', trigger: 'blur' }
                  ]
                },
                userList: [],
                added:true,
                edit:true,
                dels:true
            };
        },
        created(){

        },
        mounted(){
            //返回的权限不知道什么原因会导致有些浏览器登录后外包管理的实际产量操作按钮消失，所以改成直接显示
            this.dels = true

            // var data = JSON.stringify(this.$store.state.wb)
            //
            // var c = "实际产量"
            // if(data.indexOf(c) != -1){
            //     this.dels = true
            // }else{
            //     this.dels = false
            // }
            this.ruleForm.relevantUserId = this.$store.state.userid
            this.ruleForm.relevantUser = this.$store.state.user
            this.init()
            this.units()

        },
        computed:{
            ...mapState(['switchHeadTab'])
        },
        methods: {
          download1(){
            // window.location.href = "http://" + window.location.host + "/order/out";
            // window.location.href = "http://171.221.199.35:10109/order/out"
            axios({
              method: 'get',
              url: '/pack/export?standard=' + this.activeName1,

              responseType: 'blob'
            }).then(res=>{
              //  console.log(res)
              // let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
              // let url = window.URL.createObjectURL(blob);
              // window.location.href = url;
              this.downloadFile(res,  '数据.xls')

            }).catch(err=>{
              // console.log(err)
            })

          },
          downloadFile(res, fileName) {
            let blob = new Blob([res.data]);
            if (!fileName) {
              fileName = res.headers['content-disposition'].split('filename=').pop();
            }
            if ('msSaveOrOpenBlob' in navigator) {
              window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
            }
          },

          handleClick1({paneName}){
              console.log(paneName);
              if(paneName == '中药饮片'){
                  this.init(paneName)
              }else{
                  this.init('配方颗粒')
              }
          },
            // 获取单位
            units(){
                unit_findByList("").then((res)=>{
                    this.unitslist = res.data
                })
            },
            // 调用接口
            init(materialType){
                if(this.switchHeadTab){

                }
                pack_findByList({
                    standard:this.activeName1,
                    materialType: this.switchHeadTab == '中药饮片' ? this.switchHeadTab:materialType,
                    searchName: this.searchName,
                    page: this.currentPage1,

                }).then((res) =>{
                    this.tableData = res.rows
                    this.total1 = res.total
                })
            },
            // 编辑
            handleEdit(index,row){
                this.$router.push({
                    path: '/packing/addPacking',
                    query: { id: row.id }
                });
            },
            // 查看
            handleView(index,row){
                this.$router.push({
                    path: '/packing/viewPacking',
                    query: { id: row.id }
                });
            },
            // 选择实际产量相关人
            changeRelevant(ele){
                this.ruleForm.relevantUserId = ele.id
                this.ruleForm.relevantUser = ele.name
            },
            // 实际产量
            handleFrmLoss(index,row){

                this.ruleForm.time = ""
                this.ruleForm.newNumber = ""
                this.pici = row.batch
                // this.ruleForm.relevantUser = ""
                this.dialogFormVisible = true
                user_findAll('').then((res)=>{
                    this.userList = res.data

                })
                pack_findById(row.id).then((res) =>{
                    this.ruleForm.id = res.data.id
                    this.ruleForm.userNumber = res.data.userNumber
                    this.ruleForm.units = res.data.units
                    this.ruleForm.type = res.data.type

                    if(this.ruleForm.units != null && this.ruleForm.units != "" && this.ruleForm.units != "null"){
                        this.disabled = true
                    }else{
                        this.disabled = false
                    }
                })
            },
            // 提交产量
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                            var parm = {
                                type: this.ruleForm.type,
                                relevanceId: this.ruleForm.id,
                                time: this.ruleForm.time,
                                relevantUser: this.ruleForm.relevantUser,
                                relevantUserId: this.ruleForm.relevantUserId,
                                newNumber: this.ruleForm.newNumber,
                                units: "袋",
                            }

                            pack_adjust(parm).then((res) => {
                                this.$notify({
                                    title: '提示',
                                    message: '调整成功',
                                    type: 'success',
                                    duration:1000
                                });
                                this.dialogFormVisible = false
                                this.init();

                            })

                    } else {
                        return false;
                    }
                })
            },
            // 搜索
            handleSearch() {
                this.init();
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init()
            },
        }
    }
</script>

<style scoped>
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom: 0;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
</style>
